<template>
	<view>
		<view class="bar">
			<view class="bar1" :style="{'background-image':item.img}"  v-for="(item,index) in competant.slice(0,3)" :key="index" @tap="router(item.path)">
				<view class="bar1-item1">{{item.name}}</view>
				<view class="bar1-item2">{{item.englist}}</view>
			</view>
		</view>
		<view class="bar" style="padding: 0rpx 30rpx;">
			<view class="bar2"  v-for="(item,index) in competant.slice(3,7)" :key="index" @tap="router(item.path)">
				<image :src="item.img" mode=""></image>
				<view class="bar2-item1">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'Bar',
		data() {
			return {
				competant:[
					{
						name:'绑定API',
						englist:'API interface',
						path:'/pages/home/key',
						img:'url(/static/home/tab1.png)'
					},
					{
					name:'交易所开户',
					englist:'Bill',
					path:'/pages/college/webvuew?url=',//传参数传不过去 页面回跳转带其他页面
					// https://www.huobi.li/zh-cn/topic/double-reward/?invite_code=fs822223
					img:'url(/static/home/tab2.png)'},
					{
					name:'新手指南',
					englist:'Newbie guide',
					path:'/pages/college/guide',
					img:'url(/static/home/tab3.png)'
					},
					{name:'量 化',
					img:'/static/tab/tab1.png',
					path:'/pages/transaction/transaction'},
					{name:'充 值',
					img:'/static/tab/tab2.png',
					path:'/pages/user/chongbi'},
					{name:'账 单',
					img:'/static/tab/tab3.png',
					path:'/pages/user/income'},
					{name:'客 服',
					img:'/static/tab/tab4.png',
					path:'/pages/user/kefu-item'},
				]
			};
		},
		methods:{
			router(url){
				// if(url=="/pages/home/key"){
				// 	return this.util.toast('暂未开放')
				// }
				this.$Router.push({
					path:url
				})
			}
		}
	}
</script>
<style lang="scss">
.bar{
	@include flex;
	justify-content: space-between;
	width: 100%;
	// border: 1px solid red;
	.bar1{
		@include background;
		line-height: 45rpx;
		padding: 20rpx 35rpx;
		margin-bottom: 40rpx;
		font-size: 26rpx;
		font-family: PingFang;
		color: #FFFFFF;
		.bar1-item1{
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.bar2{
		text-align: center;
		image{
			width: 50rpx;
			height: 50rpx;
		}
		.bar2-item1{
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: bold;
			line-height: 60rpx;
		}
	}
}
</style>
